import { css } from "@emotion/react"

export const maskBeforeCss = css`
    will-change: auto;
    content: "mask-before-css";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(1rem);
    color: #2962ff;
    /* 調整文字位置 */
    padding-right: 1rem;
    padding-bottom: 1rem;
    box-sizing: content-box;
`

export const gridLineBackgroundCss = css`
    --color: #2962ff;
    background-image:
        linear-gradient(90deg, var(--color) 1rem, transparent 0),
        linear-gradient(0deg, var(--color) 1rem, transparent 0);
    background-size: 10rem 10rem;
`

export const hideScrollbarCss = css`
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
        display: none;
    }
`

export const eventPreventCss = css`
    pointer-events: none;
    user-select: none;
`
